<template>
    <div class="mainSty">
        <div class="min_tit_sty flex_ard">
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.uploadNum }}</div>
                <div>上传总数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.earningsSum }}</div>
                <div>收益(元)</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.browseNum }}</div>
                <div>浏览次数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>{{ myUpdateNum.downloadedNum }}</div>
                <div>被下载次数</div>
            </div>
        </div>
        <div class="main_con_sty">
            <div class="con_tit flex_str">
                <div class="up_tit_sty"><span style="color:red">*</span> 定位: </div>
                <div style="width:180px;">
                    <el-cascader v-model="city" :options="cityData" :props="props" @change="handleChange"
                        placeholder="定位" />
                </div>
                <div class="up_tit_sty"><span style="color:red">*</span>小区名: </div>
                <el-input style="width:180px;margin-right: 30px;" v-model="houseParams.communityName"></el-input>
                <div class="up_tit_sty"><span style="color:red">*</span>备案名: </div>
                <el-input style="width:180px;" placeholder="可与小区名相同" v-model="houseParams.recordName"></el-input>
            </div>

            <div class="con_tit flex_str">
                <div class="up_tit_sty"><span style="color:red">*</span>建筑面积: </div>
                <el-input style="width:180px;" type="number" v-model="houseParams.constructionArea"></el-input>
                <div class="up_tit_sty"><span style="color:red">*</span>楼栋号: </div>
                <el-input style="width:180px;" placeholder="若不清楚可填：未知" v-model="houseParams.buildingNo"></el-input>
            </div>

            <div class="con_tab_sty flex_str">
                <div v-for="(item, index) in conTabList" :key="index" @click="conTabClick(item.id)"
                    :style="conTabId == item.id ? 'color: #E21C20;border-bottom: 2px solid #E21C20;' : 'border-bottom: 2px solid #fff;'">
                    {{ item.name }}
                </div>
                <!-- <div class="saveBtnSty">全部保存</div> -->
            </div>
            <!-- --原始框架cad start -- -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 1">
                <div class="imgNameSty">
                    <div><span style="color: #E21C20;">*</span>上传原始框架图片：</div>
                    <div class="txtSty">支持多选,最多上传8张图片</div>
                    <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                </div>
                <div>
                    <el-upload :on-preview="handlePictureCardPreview" action="" v-model:file-list="yskjfileList"
                        list-type="picture-card" :http-request="yskjUpdate" :multiple="true" :limit="8"
                        :on-remove="yskjRemoveImg">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>

            <div class="flex_str" style="margin-top: 50px;margin-bottom: 40px;" v-show="conTabId == 1">
                <div class="wenjian_tit_sty"><span style="color: #E21C20;">*</span>上传原始框架文件：</div>
                <div class="fileNameSty">{{ yskjFileCadName }}</div>
                <el-upload class="upload-demo" action="" :http-request="btnFileUpdate" :show-file-list="false">
                    <div class="btnSty">点击上传文件</div>
                </el-upload>
            </div>
            <!-- --原始框架cad end -->


            <!-- --平面方案cad start -- -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 2">
                <div class="imgNameSty">
                    <div><span style="color: #E21C20;">*</span>上传平面方案图片：</div>
                    <div class="txtSty">支持多选,最多上传8张图片</div>
                    <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                </div>
                <div>
                    <el-upload v-model:file-list="pmfafileList" :http-request="pmfaUpdate"
                        :on-preview="handlePictureCardPreview" action="" list-type="picture-card" :multiple="true"
                        :limit="8" :on-remove="pmfaRemoveImg">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>

            <div class="flex_str" style="margin-top: 50px;margin-bottom: 40px;" v-show="conTabId == 2">
                <div class="wenjian_tit_sty"><span style="color: #E21C20;">*</span>上传平面方案cad文件：</div>

                <div class="fileNameSty">{{ pmfaFileCadName }}</div>
                <el-upload class="upload-demo" action="" :http-request="btnFileUpdateTwo" :show-file-list="false">
                    <div class="btnSty">点击上传文件</div>
                </el-upload>
            </div>
            <!-- --平面方案cad end -->

            <!-- --效果图 start-- -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 3">
                <div class="imgNameSty">
                    <div><span style="color: #E21C20;">*</span>上传效果图图片或全景二维码：</div>
                    <div class="txtSty">支持多选,最多上传15张图片</div>
                    <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                </div>
                <div>
                    <el-upload v-model:file-list="xgtfileList" :http-request="xgtUpdate"
                        :on-preview="handlePictureCardPreview" action="" list-type="picture-card" :multiple="true"
                        :limit="15" :on-remove="xgtRemoveImg">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>
            <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 3">
                <div style="margin-right: 30px;">全景链接上传:</div>
                <div>
                    <textarea class="text_area_sty" v-model="houseParams.houseFileList[2].externalLinks"></textarea>
                </div>
            </div>
            <!-- 效果图 end -->


            <!-- 实景照片start -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 4">
                <div class="imgNameSty">
                    <div><span style="color: #E21C20;">*</span>上传实景图片或实景二维码：</div>
                    <div class="txtSty">支持多选,最多上传25张图片</div>
                    <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                </div>
                <div>
                    <el-upload v-model:file-list="sjzpfileList" :http-request="sjzpUpdate"
                        :on-preview="handlePictureCardPreview" action="" list-type="picture-card" :multiple="true"
                        :limit="25" :on-remove="sjzpRemoveImg">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>
            <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 4">
                <div style="margin-right: 30px;">实景链接上传:</div>
                <div>
                    <textarea class="text_area_sty" v-model="houseParams.houseFileList[3].externalLinks"></textarea>
                </div>
            </div>
            <!-- 实景照片end-->

            <!-- 材质照片start -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 5">
                <div class="imgNameSty">
                    <div><span style="color: #E21C20;">*</span>上传量房图片：</div>
                    <div class="txtSty">支持多选,最多上传25张图片</div>
                    <div class="txtSty">提示: 建议上传4:3的JPG/JPEG/PGN格式图片,户享邦有权修改您的图片顺序</div>
                </div>
                <div>
                    <el-upload v-model:file-list="czzpfileList" :http-request="czzpUpdate"
                        :on-preview="handlePictureCardPreview" action="" list-type="picture-card" :multiple="true"
                        :limit="25" :on-remove="lftpRemoveImg">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </div>
            <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 5">
                <div style="margin-right: 30px;">量房图片链接:</div>
                <div>
                    <textarea class="text_area_sty" v-model="houseParams.houseFileList[4].externalLinks"></textarea>
                </div>
            </div>
            <!-- 材质照片end-->


            <div class="xieyi_box_sty">
                <div class="flex_str">
                    <el-checkbox v-model="radioValue" size="large" />
                    <div class="foo_txt_sty">我已阅读并同意 户享邦
                        <span @click="showAgreement">《户享邦用户协议》</span>和<span @click="showIncomeExplain">《户享邦资料上传、收益说明》</span>
                    </div>
                </div>

                <div class="submit_btn_sty"
                    :style="radioValue ? 'background-color: #E21C20;' : 'background-color: #A19EA8;'" @click="submitFun">
                    提交审核</div>
            </div>
        </div>
        <!-- <div class="add_btn_sty flex_cen">
                <div class="add_icon_Sty flex_cen">+</div>
                <div>新增作品</div>
            </div> -->
    </div>
    <img :src="dialogImageUrl" :title="'点击关闭'" class="currentImgSty" v-if="dialogVisible" @click="dialogVisible = false" />
    <agreementVue v-model="agreementDialog.isShow" @close="closeAgreement"></agreementVue>
    <incomeExplainVue v-model="imcomeDialog.isShow" @close="closeIncomeExplain"></incomeExplainVue>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import cityData from '@/utils/city.json'
import { Plus } from '@element-plus/icons-vue'
import type { UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'
import { updateFileApi, saveHouseApi, myStatisticsApi, updateCadApi } from '@/api/index/index';
import { ElLoading } from 'element-plus'
import agreementVue from './agreement.vue'
import incomeExplainVue from './incomeExplain.vue'
const emits = defineEmits(['goMyUpdate'])
// 单选框的值
const radioValue = ref(false)

const yskjFileCadName = ref('')
const pmfaFileCadName = ref('')
const yskjfileList = ref<UploadUserFile[]>([
])
const pmfafileList = ref<UploadUserFile[]>([
])
const xgtfileList = ref<UploadUserFile[]>([
])
const sjzpfileList = ref<UploadUserFile[]>([
])
const czzpfileList = ref<UploadUserFile[]>([
])
const yskjImgNameArr = ref<any>([])
const pmfaImgNameArr = ref<any>([])
const xgtImgNameArr = ref<any>([])
const sjzpImgNameArr = ref<any>([])
const czzpImgNameArr = ref<any>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const city = ref<string>('定位')
const props = {
    expandTrigger: 'hover',
    label: 'name',
    value: 'name',
    checkStrictly: true
}
const conTabId = ref(1)
const conTabList = ref([
    { id: 1, name: '原始框架cad' },
    { id: 2, name: '平面方案cad' },
    { id: 3, name: '效果图' },
    { id: 4, name: '实景照片' },
    { id: 5, name: '量房照片' },
])

const houseParams = reactive<any>({
    position: '',
    communityName: '',
    recordName: '',
    constructionArea: 0,
    buildingNo: '',
    signature: '',
    houseFileList: [
        // type: 1 参数必传
        {
            drawingIds: "",
            fileIds: "",
            type: 1,
        }, {
            drawingIds: "",
            fileIds: "",
            type: 2
        }, {
            drawingIds: "",
            externalLinks: '',
            type: 3
        }, {
            drawingIds: "",
            externalLinks: '',
            type: 4
        }, {
            drawingIds: "",
            externalLinks: '',
            type: 5
        }
    ]
})
const myUpdateNum = ref({
    browseNum: 0,
    downloadedNum: 0,
    earningsSum: 0,
    uploadNum: 0
})
const handlePictureCardPreview = (uploadFile: any) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
// 原始框架图片删除
const yskjRemoveImg = (e: any) => {
    yskjImgNameArr.value = yskjImgNameArr.value.filter((item: any) => item.name != e.name)
}
const pmfaRemoveImg = (e: any) => {
    pmfaImgNameArr.value = pmfaImgNameArr.value.filter((item: any) => item.name != e.name)
}
const xgtRemoveImg = (e: any) => {
    xgtImgNameArr.value = xgtImgNameArr.value.filter((item: any) => item.name != e.name)
}
const sjzpRemoveImg = (e: any) => {
    sjzpImgNameArr.value = sjzpImgNameArr.value.filter((item: any) => item.name != e.name)
}
const lftpRemoveImg = (e: any) => {
    czzpImgNameArr.value = czzpImgNameArr.value.filter((item: any) => item.name != e.name)
}
const handleChange = (e: any) => {
    let str = ''
    e.map((v: any) => {
        str += v
    })
    city.value = e
    houseParams.position = str
}
const conTabClick = (id: number) => {
    conTabId.value = id
}
// 原始框架图片上传
const yskjUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        yskjImgNameArr.value.push(obj)
    })
}
// 原始框架文件上传
const btnFileUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateCadApi(formData).then((res: any) => {
        loading.close()
        if (res.status == 200) {
            houseParams.houseFileList[0].fileIds = res.data.fileId
            yskjFileCadName.value = res.data.fileName
            ElMessage.success('上传成功')
        }
    })
}

// 平面方案文件上传
const btnFileUpdateTwo = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateCadApi(formData).then((res: any) => {
        loading.close()
        if (res.status == 200) {
            houseParams.houseFileList[1].fileIds = res.data.fileId
            pmfaFileCadName.value = res.data.fileName
            ElMessage.success('上传成功')
        }
    })
}

const pmfaUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        // houseParams.houseFileList[1].drawingIds += res.data.fileId + ','
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        pmfaImgNameArr.value.push(obj)
    })
}
const xgtUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        // houseParams.houseFileList[2].drawingIds += res.data.fileId + ','
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        xgtImgNameArr.value.push(obj)
    })
}
const sjzpUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        // houseParams.houseFileList[3].drawingIds += res.data.fileId + ','
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        sjzpImgNameArr.value.push(obj)
    })
}
// 量房照片 图片上传
const czzpUpdate = (uploadFile: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = uploadFile.file;
    const formData = new FormData();
    formData.append("file", file);
    updateFileApi(formData).then((res: any) => {
        loading.close()
        // houseParams.houseFileList[4].drawingIds += res.data.fileId + ','
        let obj = {
            name: res.data.fileName,
            id: res.data.fileId
        }
        czzpImgNameArr.value.push(obj)
    })
}

const submitFun = () => {
    houseParams.houseFileList.map((v: any) => {
        v.drawingIds = ''
    })
    yskjImgNameArr.value.map((v: any) => {
        houseParams.houseFileList[0].drawingIds += v.id + ','
    })
    pmfaImgNameArr.value.map((v: any) => {
        houseParams.houseFileList[1].drawingIds += v.id + ','
    })
    xgtImgNameArr.value.map((v: any) => {
        houseParams.houseFileList[2].drawingIds += v.id + ','
    })
    sjzpImgNameArr.value.map((v: any) => {
        houseParams.houseFileList[3].drawingIds += v.id + ','
    })
    czzpImgNameArr.value.map((v: any) => {
        houseParams.houseFileList[4].drawingIds += v.id + ','
    })
    if (houseParams.position == '') {
        ElMessage.warning('请选择户型所在地区')
        return
    }
    if (houseParams.communityName == '') {
        ElMessage.warning('请输入小区名称')
        return
    }
    if (houseParams.recordName == '') {
        ElMessage.warning('请输入备案名')
        return
    }
    if (houseParams.constructionArea == '') {
        ElMessage.warning('请输入户型面积')
        return
    }
    if (houseParams.buildingNo == '') {
        ElMessage.warning('请输入户型楼栋号')
        return
    }

    if (radioValue.value == false) {
        ElMessage.warning('请同意户享邦协议！')
        return
    }
    if (houseParams.houseFileList[0].drawingIds == '' || houseParams.houseFileList[0].fileIds == '') {
        ElMessage.warning('原始框架cad信息不完整')
        return
    }
    if (houseParams.houseFileList[0].fileIds.substr(-1) == ',') {
        houseParams.houseFileList[0].fileIds = houseParams.houseFileList[0].fileIds.substring(0, houseParams.houseFileList[0].fileIds.length - 1)
    }
    if (houseParams.houseFileList[1].fileIds.substr(-1) == ',') {
        houseParams.houseFileList[1].fileIds = houseParams.houseFileList[1].fileIds.substring(0, houseParams.houseFileList[1].fileIds.length - 1)
    }
    let newList = []
    newList.push(houseParams.houseFileList[0])
    if (houseParams.houseFileList[1].drawingIds != '' || houseParams.houseFileList[1].fileIds != '') {
        newList.push(houseParams.houseFileList[1])
    }
    if (houseParams.houseFileList[2].drawingIds != '' || houseParams.houseFileList[2].externalLinks != '') {
        newList.push(houseParams.houseFileList[2])
    }
    if (houseParams.houseFileList[3].drawingIds != '' || houseParams.houseFileList[3].externalLinks != '') {
        newList.push(houseParams.houseFileList[3])
    }
    if (houseParams.houseFileList[4].drawingIds != '' || houseParams.houseFileList[4].externalLinks != '') {
        newList.push(houseParams.houseFileList[4])
    }

    houseParams.houseFileList = newList

    houseParams.houseFileList.map((v: any) => {
        let str = v.drawingIds.substr(-1)
        if (str == ',') {
            v.drawingIds = v.drawingIds.substring(0, v.drawingIds.length - 1)
        }
    })

    saveHouseApi(houseParams).then((res: any) => {
        if (res.status == 200) {
            ElMessage.success('提交成功！')
            emits('goMyUpdate')
        }
    })


}
const getMyStatistics = () => {
    myStatisticsApi().then((res: any) => {
        myUpdateNum.value = res.data
    })
}
onMounted(() => {
    getMyStatistics()
})


const agreementDialog = reactive({
    isShow: false
})
const closeAgreement = () => {
    agreementDialog.isShow = false
}
const showAgreement = () => {
    agreementDialog.isShow = true
}

const imcomeDialog = reactive({
    isShow: false
})
const closeIncomeExplain = () => {
    imcomeDialog.isShow = false
}
const showIncomeExplain = () => {
    imcomeDialog.isShow = true
}

</script>
<style scoped>
.currentImgSty {
    position: fixed;
    top: 10vh;
    left: 35vw;
    width: 30vw;

}

.fileNameSty {
    font-size: 14px;
    color: #666;
}

.up_tit_sty {
    width: 100px;
}

.text_area_sty {
    width: 450px;
    height: 120px;
}

.add_icon_Sty {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    background-color: #E21C20;
    margin-right: 10px;
}

.add_btn_sty {
    height: 40px;
    background-color: #fff;
    color: #E21C20;
    font-size: 18px;
    margin: 40px 0;
}

.submit_btn_sty {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #fff;
    border-radius: 30px;
    margin-top: 30px;
}

.foo_txt_sty {
    font-size: 18px;
    margin-left: 20px;
}

.foo_txt_sty span {
    color: #E21C20;
}

.btnSty {
    padding: 6px 12px;
    background-color: #A19EA8;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    margin-left: 30px;
    margin-right: 12px;

}

.wenjian_tit_sty {
    margin-right: 30px;

}

.imgNameSty {
    width: 27%;
    margin-right: 30px;
}

.txtSty {
    font-size: 16px;
    color: #A19EA8;
    margin-top: 20px;
}

.saveBtnSty {
    padding: 10px 30px;
    background-color: #E21C20;
    font-size: 18px;
    border-radius: 6px;
    color: #fff;
    margin-left: 140px !important;
}

.con_tab_sty {
    border: 8px solid #f0f0f0;
    padding: 8px 0;
}

.con_tab_sty div {
    margin: 0 20px;
}

.con_tit {
    width: 100%;
}

.con_tit el-input {
    width: 360px;
}

.con_tit div {
    margin-bottom: 20px;
    margin-right: 20px;
}



.main_tab_sty {
    text-align: center;
    font-size: 18px;
    color: #A19EA8;
}

.main_tab_sty :first-child {
    color: #000;
    margin-bottom: 4px;
}

.mentItemSty {
    font-size: 20px;
    margin: 9px 0;
}

.menu_tit_sty {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: #F1ECE5;
    border-left: 3px solid #FF8D1C;
}

.openVipSty {
    width: 85%;
    border: 3px solid #EB6063;
    color: #EB6063;
    text-align: center;
    border-radius: 6px;
    font-size: 18px;
    padding: 4px 0;
    margin: 14px 0;
}

.leverSty {
    color: #ccc;
}

.user_name_sty {
    font-weight: 700;
    margin: 10px 0;
}

.lever_img {
    width: 32px;
    margin-right: 12px;
}

.user_img_sty {
    width: 88px;
    border-radius: 50%;
    margin-top: 20px;
}


.label_icon_sty {
    position: absolute;
    top: 0;
    right: 30px;
    width: 38px;
    height: 50px;
}

.mainSty {
    width: 80%;
    min-height: 500px;
}

.min_tit_sty {
    width: 100%;
    min-height: 120px;
    background-color: #fff;
    margin-bottom: 40px;
}

.main_con_sty {
    width: 100%;
    min-height: 500px;
    background-color: #fff;
    padding: 30px 20px;
}</style>